<template>
  <div class="list">
    <!-- 礼物列表 -->
    <ul class="gift-list">
      <li
        v-for="item in giftlistXX1"
        :key="item.id"
        @click="switch_overlay(item.id)"
      >
        <div
          class="con"
          :style="{
            background: 'url(' + item.image + ') no-repeat',
            backgroundSize: 'contain'
          }"
        >
          <div class="msg">
            <div class="wp">
              <p class="tit">{{ item.name }}</p>
              <p class="dsc">{{ item.description }}</p>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false" class="mask">
      <div
        class="wrapper"
        @click.stop="$router.push('/search/giftarticle/giftId=' + overlayId)"
      >
        <div class="wp">
          <div
            class="pic"
            :style="{
              background: 'url(' + overlayPic + ') no-repeat'
            }"
          >
            <div class="msg">
              <div class="wp1">
                <p class="tit">{{ overlayName }}</p>
                <p class="dsc">{{ overlayDescription }}</p>
              </div>
            </div>
          </div>
          <p class="text">
            {{ overlayMsg }}
          </p>
          <div class="line"></div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'giftlist',
  // 定义属性
  data() {
    return {
      giftlistXX1: [
        {
          id: 1,
          name: '摩羯座的创意礼物',
          description: '当今世界',
          message:
            '善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，世界上并不缺乏创意和甜美的人，眼睛从未停止过。善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，世界上并不缺乏创意和甜美的人。',
          image: require('@/assets/images/search/giftslist/gift1.png')
        },
        {
          id: 2,
          name: '世界上热门流行礼物',
          description: '礼物',
          message:
            '善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，世界上并不缺乏创意和甜美的人，眼睛从未停止过。善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，世界上并不缺乏创意和甜美的人。',
          image: require('@/assets/images/search/giftslist/gift2.png')
        },
        {
          id: 3,
          name: '因为有你',
          description: '礼物天堂',
          message:
            '善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，世界上并不缺乏创意和甜美的人，眼睛从未停止过。善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，世界上并不缺乏创意和甜美的人。',
          image: require('@/assets/images/search/giftslist/gift3.png')
        },
        {
          id: 4,
          name: 'Because I know you',
          description: 'For the unique you',
          message:
            '善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，世界上并不缺乏创意和甜美的人，眼睛从未停止过。善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，世界上并不缺乏创意和甜美的人。',
          image: require('@/assets/images/search/giftslist/gift4.png')
        },
        {
          id: 5,
          name: '因为有你',
          description: '礼物天堂',
          message:
            '善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，世界上并不缺乏创意和甜美的人，眼睛从未停止过。善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，世界上并不缺乏创意和甜美的人。',
          image: require('@/assets/images/search/giftslist/gift4.png')
        }
      ],
      show: false,
      overlayMsg: '',
      overlayPic: '',
      overlayName: '',
      overlayDescription: '',
      overlayId: ''
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState(['giftlistX1'])
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    ...mapActions(['getSearchGift']),
    ...mapMutations(['updateGiftlist']),
    // 2.更改遮罩层
    switch_overlay(id) {
      const item = this.giftlistXX1.find(item => 
         id === item.id
      ) // 找到id对应商品
      this.show = true // 显示遮罩层
      // 更新遮罩层数据
      this.overlayMsg = item.message
      this.overlayName = item.name
      this.overlayDescription = item.description
      this.overlayPic = item.image
      this.overlayId = id
      console.log(item)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getSearchGift() // 1.请求store中actions中的ajax获取礼物列表
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
.list {
  overflow-y: auto;
  height: 86vh;
  //礼物列表
  .gift-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .con {
      margin: 20px 58px;
      position: relative;
      background-size: contain;
      flex: 1;
      width: 634px;
      height: 296px;
      .msg {
        position: absolute;
        padding: 6px;
        background: rgb(255, 255, 255, 0.8);
        border-radius: 7px;
        width: 512px;
        height: 92px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .wp {
          width: 500px;
          height: 82px;
          border: solid 1px #393939;
          border-radius: 10px;
          .tit {
            font-family: PingFang-SC-Heavy;
            font-size: 28px;
            color: #484747;
            line-height: 48px;
            margin: unset;
          }
          .dsc {
            font-family: PingFangSC-Regular;
            font-size: 22px;
            color: #b4b4b4;
            line-height: 22px;
            margin: unset;
          }
        }
      }
    }
  }
  //遮罩层
  .mask {
    z-index: 9;
  }
  .wrapper {
    .wp {
      position: relative;
      margin: 606px 0 0 58px;
      width: 634px;
      height: 344px;
      background-color: #fff;
      border-radius: 7px;
      padding: 0 92px;
      // 顶部背景图
      .pic {
        position: absolute;
        top: -164px;
        left: 32px;
        width: 570px;
        height: 264px;
        background-size: contain !important;
        .msg {
          width: 387px;
          height: 88px;
          background: rgb(255, 255, 255, 0.8);
          position: absolute;
          top: 89px;
          left: 89px;
          border-radius: 7px;
          padding: 6px;
        }
        .wp1 {
          width: 378px;
          height: 79px;
          border: solid 1px #393939;
          border-radius: 10px;
          .tit {
            font-family: PingFang-SC-Heavy;
            font-size: 28px;
            color: #484747;
            line-height: 48px;
            margin: unset;
          }
          .dsc {
            font-family: PingFangSC-Regular;
            font-size: 22px;
            color: #b4b4b4;
            line-height: 22px;
            margin: unset;
          }
        }
      }
      // 文字信息
      .text {
        margin: unset;
        position: absolute;
        top: 135px;
        text-align: left;
        width: 450px;
        font-family: PingFang-SC-Medium;
        font-size: 20px;
        line-height: 25px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #b4b4b4;
      }
      //右下角线条
      .line {
        position: absolute;
        bottom: 48px;
        right: 90px;
        width: 42px;
        height: 2px;
        background-color: #979797;
      }
    }
  }
}
</style>
